<template>
  <div class="pie-stacked-line-chart">
    <div class="chart-child chart-card-box">
			<pie-chart 
        :pie-chart-data="pieChartData" 
        :chart-type="chartType"
        @fetchTableData="fetchTableData"
        title="满意度构成" 
      />
    <drill-down-table
      v-show="showPieTable"
      :chart-type="chartType"
      :chart-option="chartOption"
      :pie-table-data="pieTableData"
      :user-module-auth="userModuleAuth"
      :table-page-params="tablePageParams"
      @foldTable="foldPieTable"
      @getCellData="getCellData"
      @fetchTableData="fetchPieTableData"
      @export="exportTableData('pie')"
      @handleSizeChange="handlePieSizeChange"
      @handleNumChange="handlePieNumChange"
    />
    <chart-task-table
      ref="chartTaskTable"
      v-show="showTaskTable && showPieTable"
      :chart-type="chartType"
      :task-ids="taskIds"
      :chart-option="chartOption"
      :fetch-params="fetchParams"
      :user-module-auth="userModuleAuth"
      @export="exportTaskTableData"
      @getCellData="getCellData"
    />
    </div>

    <div class="chart-child chart-card-box">
			<stacked-line-chart 
        :chart-data="chartData" 
        :chart-type="chartType"
        title="好评率"
        :chart-option="chartOption"
        @fetchTableData="fetchTableData"
        @fetchChartData="fetchChartData"
      />
    <drill-down-table
      v-show="showLineTable"
      :chart-type="chartType"
      :chart-option="chartOption"
      :line-table-data="lineTableData"
      :user-module-auth="userModuleAuth"
      :table-page-params="tablePageParams"
      @foldTable="foldLineTable"
      @fetchTableData="fetchLineTableData"
      @export="exportTableData('line')"
      @handleSizeChange="handleLineSizeChange"
      @handleNumChange="handleLineNumChange"
    />
    </div>
    
  </div>
</template>

<script>
/*components*/
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import DrillDownTable from './DrillDownTable.vue'
import {
  StackedLineChart,
  PieChart,
} from './index.ts';
import {
  ChartTaskTable
} from './common/index';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';
import {
  getSatisfactionPineTaskData,
} from '@src/api/ManagementReport'

export default {
  name: 'pie-stacked-line-chart',
  mixins: [ChartsMixin],
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    lineChartData: {
      type: Array,
      default: () => [],
    },
    pieChartData: {
      type: Object,
      default: () => ({}),
    },
    chartType: {
      type: String,
      default: ''
    },
    pieTableData: {
      type: Array,
      default: () => [],
    },
    lineTableData: {
      type: Array,
      default: () => [],
    },
    tablePageParams: {
      type: Object,
      default: () => ({}),
    },
    chartOption: {
      type: Object || String
    },
    fetchParams: {
      type: Object || String
    },
    showPieTable: {
      type: Boolean,
      default: false
    },
    showLineTable: {
      type: Boolean,
      default: false
    },
    showTaskTable: {
      type: Boolean,
      default: false
    },
    userModuleAuth: {
      type: Object,
      default: ()=> ({})
    }
  },
  setup(props, { emit }) {
    const chartTaskTable = ref(null)
    const fetchChartData = value => {
      emit('fetchChartData', value)
    }

    // let showTaskTable = ref(false)
    let taskIds = ref([])
    const getCellData = async(row, column) => {
      let keys = column.property
      
      if(keys === 'name') return;

      // 获取工单下钻的taskId
      taskIds.value = row[`${keys}_taskId`]

      emit('foldTaskTable', true, taskIds.value)
      await nextTick(() => {
        chartTaskTable.value.getData(taskIds.value, getSatisfactionPineTaskData)
      })
    }
    
    const handleSizeChange = (value, chartType) => {
      emit('handleSizeChange', value, chartType)
    }

    const handleNumChange = (value, chartType) => {
      emit('handleNumChange', value, chartType)
    }

    const handlePieSizeChange = value => {
      handleSizeChange(value, 'Pie')
    }

    const handlePieNumChange = value => {
      handleNumChange(value, 'Pie')
    }

    const handleLineSizeChange = value => {
      handleSizeChange(value, 'Line')
    }

    const handleLineNumChange = value => {
      handleNumChange(value, 'Line')
    }

    // 点击图表请求下钻table参数
    
    const fetchTableData = (value, chartType, tabType) => {
      if (chartType === 'Line') {
        emit('foldTaskTable', false)
      }
      // 处理tab切换参数
      emit('fetchTableData', value, chartType, tabType)
    }

    const fetchPieTableData = (value, chartType, tabType) => {
      fetchTableData(value, 'Pie' , tabType)
    }

    const fetchLineTableData = (value, chartType, tabType) => {
      fetchTableData(value, 'Line', tabType)
    }

    const foldTable = (value, chartType) => {
      emit('foldTable', value, chartType)
    }

    const foldPieTable = value => {
      foldTable(value, 'Pie')
    }

    const foldLineTable = value => {
      foldTable(value, 'Line')
    }

    const exportTaskTableData = (type, pageParams) => {
      exportTableData('task', pageParams)
    }

    const exportTableData = (value, pageParams) => {
      emit('export', value, pageParams)
    }

    onMounted(() => {

    });

    onUnmounted(() => {

    });

    return {
      taskIds,
      chartTaskTable,
      fetchChartData,
      foldTable,
      foldPieTable,
      foldLineTable,
      handlePieSizeChange,
      handlePieNumChange,
      handleLineSizeChange,
      handleLineNumChange,
      fetchTableData,
      fetchPieTableData,
      fetchLineTableData,
      getCellData,
      exportTableData,
      exportTaskTableData
    }
  },
	components: {
		[StackedLineChart.name]: StackedLineChart,
		[PieChart.name]: PieChart,
    [DrillDownTable.name]: DrillDownTable,
    [ChartTaskTable.name]: ChartTaskTable
	}
};
</script>

<style lang="scss" scoped>
.pie-stacked-line-chart {
  width: 100%;
	// display: flex;
	// justify-content: space-between;
	.chart-child {
		width: 100%;
		margin-bottom: 16px;
	}
  ::v-deep .el-card {
    overflow: visible;
  }
}
</style>
